import React, { useState } from "react";
import { Button } from "antd";
import "./Demo1.less";

const Demo = function Demo() {
  let [num, setNum] = useState(0); // 返回值是一个数组，数组中一个是设置的初始值，一个是修改状态的函数，通过结构的方法来接收他

  const handle = () => {
    setNum(num + 10);
    setTimeout(() => {
      console.log(num);
    }, 2000);
  };

  return (
    <div className="demo">
      <span className="num">{num}</span>
      <Button type="primary" size="small" onClick={handle}>
        新增
      </Button>
    </div>
  );
};

export default Demo;

// useState 的源码逻辑，并非真正的源码
// var _state;
// function useState(initiaValue) {
//   if (typeof _state === "undefined") _state = initiaValue;
//   var setState = function setState(value) {
//     _state = value;
//     // 通知视图更新
//   };
//   return [_state, setState];
// }
